package entity

const ConfigHTML = `
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <style>
      *,
      *:before,
      *:after{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body{
        background-color: #080710;
      }
      .background{
        width: 430px;
        height: 520px;
        position: absolute;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
      }
      .background .shape{
        height: 200px;
        width: 200px;
        position: absolute;
        border-radius: 50%;
      }
      .shape:first-child{
        background: linear-gradient(
                #1845ad,
                #23a2f6
        );
        left: -80px;
        top: -80px;
      }
      .shape:last-child{
        background: linear-gradient(
                to right,
                #ff512f,
                #f09819
        );
        right: -30px;
        bottom: -80px;
      }
      #form{
        height: 520px;
        width: 400px;
        background-color: rgba(255,255,255,0.13);
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        border-radius: 10px;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255,255,255,0.1);
        box-shadow: 0 0 40px rgba(8,7,16,0.6);
        padding: 20px 35px;
      }
      #form *{
        font-family: 'Poppins',sans-serif;
        color: #ffffff;
        letter-spacing: 0.5px;
        outline: none;
        border: none;
      }
      #form h3{
        font-size: 32px;
        font-weight: 500;
        line-height: 42px;
        text-align: center;
      }
      label{
        display: block;
        margin-top: 30px;
        font-size: 16px;
        font-weight: 500;
      }
      input{
        display: block;
        height: 50px;
        width: 100%;
        background-color: rgba(255,255,255,0.07);
        border-radius: 3px;
        padding: 0 10px;
        margin-top: 8px;
        font-size: 14px;
        font-weight: 300;
      }
      ::placeholder{
        color: #e5e5e5;
      }
      #btn{
        margin-top: 50px;
        width: 100%;
        background-color: #ffffff;
        color: #080710;
        padding: 15px 0;
        font-size: 18px;
        font-weight: 600;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <body>
    <div class="background">
      <div class="shape"></div>
      <div class="shape"></div>
    </div>

    <div id="form">
      <h3>ToneAgent 配置</h3>
      <label for="mode">MODE</label>
      <input type="text" value="{{ .mode }}" id="mode">

      <label for="tsn">TSN</label>
      <input type="tsn" value="{{ .tsn }}" id="tsn">

      <label for="proxy">PROXY</label>
      <input type="proxy" value="{{ .proxy }}" id="proxy">

      <button id="btn" onclick="ContactSubmit()">保存</button>
    </div>

  <script>
    function ContactSubmit() {
      let mode= $("#mode").val();
      let tsn= $("#tsn").val();
      let proxy= $("#proxy").val();
      let flag = confirm('确认修改？');
      if(flag) {
        $.ajax({
          type: 'POST',
          url: '/config',
          contentType: 'application/json',
          dataType: 'json',
          data: JSON.stringify({
            "mode": mode,
            "tsn": tsn,
            "proxy": proxy,
          }),
          success: function (data) {
            if (data['msg'] === 'ok') {
              alert("修改成功")
            } else {
              alert('修改失败（' + data['msg'] + ')')
            }
          }
        })
      }
    }
  </script>
  </body>
</html>
`

const LoginHTML = `

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
    <style>
        *
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }
        body
        {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            background: #23242a;
        }
        .box
        {
            position: relative;
            width: 380px;
            height: 220px;
            background: #1c1c1c;
            border-radius: 8px;
            overflow: hidden;
        }
        .box::before
        {
            content: '';
            z-index: 1;
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            transform-origin: bottom right;
            background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
            animation: animate 6s linear infinite;
        }
        .box::after
        {
            content: '';
            z-index: 1;
            position: absolute;
            top: -50%;
            left: -50%;
            width: 380px;
            height: 420px;
            transform-origin: bottom right;
            background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
            animation: animate 6s linear infinite;
            animation-delay: -3s;
        }
        @keyframes animate
        {
            0%
            {
                transform: rotate(0deg);
            }
            100%
            {
                transform: rotate(360deg);
            }
        }
        form
        {
            position: absolute;
            inset: 2px;
            background: #28292d;
            padding: 50px 40px;
            border-radius: 8px;
            z-index: 2;
            display: flex;
            flex-direction: column;
        }
        h2
        {
            color: #45f3ff;
            font-weight: 500;
            text-align: center;
            letter-spacing: 0.1em;
        }
        .inputBox
        {
            position: relative;
            width: 300px;
            margin-top: 50px;
        }
        .inputBox input
        {
            position: relative;
            width: 100%;
            padding: 10px 1px 10px;
            background: transparent;
            outline: none;
            box-shadow: none;
            border: none;
            color: #23242a;
            font-size: 1em;
            letter-spacing: 0.05em;
            transition: 0.5s;
            z-index: 10;
        }
        .inputBox span
        {
            position: absolute;
            left: 0;
            padding: 0px 0px 10px;
            pointer-events: none;
            font-size: 1em;
            color: #8f8f8f;
            letter-spacing: 0.05em;
            transition: 0.5s;
        }
        .inputBox input:valid ~ span,
        .inputBox input:focus ~ span
        {
            color: #45f3ff;
            transform: translateX(0px) translateY(-34px);
            font-size: 0.75em;
        }
        .inputBox i
        {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 3px;
            background: #45f3ff;
            border-radius: 4px;
            overflow: hidden;
            transition: 0.5s;
            pointer-events: none;
            z-index: 9;
        }
        .inputBox input:valid ~ i,
        .inputBox input:focus ~ i
        {
            height: 44px;
        }
        .links
        {
            display: flex;
            justify-content: space-between;
        }
        .links a
        {
            margin: 10px 0;
            font-size: 0.75em;
            color: #8f8f8f;
            text-decoration: beige;
        }
        .links a:hover,
        .links a:nth-child(2)
        {
            color: #45f3ff;
        }
        input[type="submit"]
        {
            border: none;
            outline: none;
            padding: 5px 30%;
            background: #45f3ff;
            cursor: pointer;
            border-radius: 4px;
            font-weight: 600;
            width: 100px;
            margin-top: 30px;
        }
        input[type="submit"]:active
        {
            opacity: 0.8;
        }
        footer
        {
          color: #e5e5e5;
          font-size: smaller;
          position: absolute;
          bottom: 30px;
        }
    </style>
  <title>ToneAgent</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div class="box">
    <form autocomplete="off">
      <h2>ToneAgent</h2>
      <div class="inputBox">
        <input id="password" type="password" required="required">
        <span>请输入密码：</span>
        <i></i>
      </div>
    </form>
  </div>
  <div>
    <input type="submit" value="登录" onclick="ContactSubmit()">
  </div>

  <script>
      function ContactSubmit() {
          let password= $("#password").val();
          $.ajax({
              type: 'POST',
              url: '/login',
              contentType: 'application/json',
              dataType: 'json',
              data: JSON.stringify({
                  "password": password,
              }),
              success: function (data) {
                  if (data['msg'] === 'ok') {
                      // alert("登录成功")
                      location.href = "/config";
                  } else {
                      alert('登录失败')
                  }
              }
          })
      }
  </script>
</body>
<footer>当前版本：%s</footer>
</html>
`
